
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="renderer" content="webkit"> 
    <title><%=siteName + ' - ' + siteAbout%></title>
    <link rel="icon" type="image/icon" href="<%=siteIcon%>">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/hljs.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/highlight.min.js"></script>
</head>
<body>
    <% include header.html %>
    <div id="doc-container">
        <div id="doc-bg"></div>
        <div id="doc-area">
            <h3>什么是UI Recorder？</h3>
            <p>UI Recorder是一款几乎零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个浏览器！</p>
            <p>我们的目标：<strong>让自测不要重复测！让自动化变成零成本！让自动化持续保障您的业务！</strong></p>
            <h3>产品的特点：</h3>
            <ol>
                <li><strong>自测 = 自动化测试</strong>：对于开发人员来讲，自测是开发流程中缺一不可的过程，我们要实现的目标就是自测过程中即可同步的录制出自动化脚本，实现真正的零成本自动化</li>
                <li><strong>无干扰录制</strong>：所作操作均无需交互干扰，鼠标、键盘、alert弹框、文件上传，完全按照正常自测流程操作即可(以下操作除外：悬停事件、断言、变量)</li>
                <li><strong>本地生成脚本</strong>：录制的脚本存储在用户本机，用户可以自行在录制的基础上进行修改定制，更自由更开放</li>
                <li><strong>丰富的断言</strong>：支持以下断言类型，val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage</li>
                <li><strong>支持公共用例</strong>: 用例之间允许相互引用，可以将某些公用的操作步骤录制为公用用例，以进一步提升录制效率</li>
                <li><strong>支持单步截图</strong>：每个步骤执行后会自动保存截图，以方便出问题时排查诊断</li>
            </ol>
            <h3>产品截图：</h3>
            <p><img src="https://raw.github.com/alibaba/uirecorder/master/screenshot/shot1.png" /></p>
            <p><img src="https://raw.github.com/alibaba/uirecorder/master/screenshot/shot2.png" /></p>
            <p><img src="https://raw.github.com/alibaba/uirecorder/master/screenshot/shot3.png" /></p>
            <p><img src="https://raw.github.com/alibaba/uirecorder/master/screenshot/shot4.png" /></p>
            <p><img src="http://wx1.sinaimg.cn/mw1024/7f3afc78gy1fdf5gass5rg20sg0g0kjo.gif" /></p>
            <p><img src="http://wx2.sinaimg.cn/mw1024/7f3afc78gy1fdf5hb8anig20sg0g0u12.gif" /></p>
            <h3>我如何快速开始？</h3>
            <ol>
                <li><strong>安装Nodejs和Chrome浏览器</strong>: <a href="https://nodejs.org/" target="_blank">https://nodejs.org/</a> (要求Node v7.x以上版本) & <a href="https://www.google.com/chrome/" target="_blank">https://www.google.com/chrome/</a></li>
                <li><strong>安装全局依赖</strong>：npm install uirecorder mocha -g</li>
                <li><strong>创建空白文件夹，并初始化配置</strong>：uirecorder init
                    <ol>
                        <li>WebDriver域名: <strong><%=host%></strong></li>
                        <li>WebDriver端口: <strong>4444</strong></li>
                        <li>浏览器列表: <a href="/webdriver#wdListTitle">WebDriver云</a></li>
                    </ol>
                </li>
                <li><strong>编辑config.json：添加F2etest认证参数</strong>：
                    <pre><code>{
    "webdriver": {
        ...
        "f2etest.userid": "<%=userid%>",
        "f2etest.apiKey": "<%=apiKey%>"
    },
    "vars": {
    }
}</code></pre>
                </li>
                <li><strong>开始录制</strong>：uirecorder sample/test.spec.js</li>
                <li><strong>运行用例</strong>：source run.sh 或 run.bat</li>
            </ol>
            <p>视频教程：<a href="http://v.youku.com/v_show/id_XMTY4NTk5NjI4MA==.html" target="_blank"><img src="/imgs/video.png"></a></p>
            <h3>录制注意事项：</h3>
            <ol>
                <li>请使用超链接或者功能触发URL变更，不要人肉的修改地址栏URL</li>
                <li>请使用鼠标点击来切换焦点，不要使用Tab切换，IE低版本浏览器不支持tab切换焦点</li>
                <li>请勿使用鼠标双击，WebDriver的双击兼容性比较差</li>
                <li>Hover悬停事件必需手工添加</li>
                <li>不支持拖动选择文字，WebDriver无法支持</li>
                <li>不支持非原生的文件上传，必需为&lt;input type=&quot;file&quot;&gt;在顶层，选择文件时不要双击，双击会导致body上触发多余事件</li>
                <li>不允许关闭非当前窗口，不允许手动切换窗口（必需以正常关闭或者超链接导航）</li>
                <li>不要点击无关区域，防止DOM结构不友好造成自动化不稳定</li>
            </ol>
            <h3>如何开发对自动化友好的代码？</h3>
            <ol>
                <li>id,name等标识性属性不能用随机值,id值页面中不允许重复</li>
                <li>DOM尽量按照功能来规划区块，并为之设置业务相关的独立id</li>
                <li>每个表单项如果设置label标签，将会使生成的用例可读性更高</li>
                <li>事件绑定尽量使用click，不要使用mousedown来触发行为，mousedown会导致mouseup事件漏触发到背景DOM</li>
            </ol>
            <p>了解更多使用教程，请访问官网：<a href="http://uirecorder.com/" target="_blank">http://uirecorder.com/</a></p>
        </div>
    </div>
    <script type="text/javascript">
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });    
    </script>
    <% include footer.html %>
</body>
</html>
